<script setup>
import { onMounted, reactive, ref } from 'vue';
import { memberListApi, memberRefreshPasswordApi, memberUpdateStatusApi } from '@/apis/member/member.js'
import { Search, Delete, EditPen, Plus, Refresh } from '@element-plus/icons-vue'

const params = reactive({
    page:1,
    pageSize:10,
    username:'',
})

const loading = ref(false)

const memebers = ref({})
const memberList = async() => {
    loading.value = true
    const res = await memberListApi(params)
    memebers.value = res.data
    loading.value = false
}

// 查询
const handleSearch = () => {
    memberList()
}

// 返回刷新数据
const handleRefresh = () => {
  params.username = '';
  params.page= 1;
  params.pageSize=10;
  memberList()
}

const disabled = ref(false)
const background = ref(false)
const handleSizeChange = (val) => {
    params.pageSize = val;
    params.page = 1;
    memberList()
}
const handleCurrentChange = (val) => {
    params.page = val;
    memberList()
}

// 重置密码
const refreshPassword = (id) => {
  ElMessageBox.confirm(
    '你确定要重置该会员的密码吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    memberRefreshPasswordApi(id).then(res => {
      if(res.code === 0){
        ElMessage({
          type: 'success',
          message: '重置成功',
        })
      }
    })
  })
  .catch(() => {
    ElMessage({
      type: 'info',
       message: '操作取消',
    })
  })
}

const handleUpdateStatus = (id, status) => {
  ElMessageBox.confirm(
    '你确定要禁用该会员吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    memberUpdateStatusApi({id:id,status:status}).then(res => {
      if(res.code === 0){
        ElMessage({
          type: 'success',
          message: '操作成功',
        })
        memberList()
      }
    })
  })
  .catch(() => {
    ElMessage({
      type: 'info',
       message: '操作取消',
    })
  })
}


onMounted(()=>memberList())
</script>

<template>
    <div class="container" v-loading="loading">
        <el-row>
      <el-col :span="24" style="display: flex;justify-content: flex-start;align-items: center;margin-bottom: 10px;">
        <span style="display: inline-block;width: 70px;">会员名称</span>
        <el-input v-model="params.username" placeholder="请输入会员名称" clearable style="width: 280px;" />
        <!-- <span style="display: inline-block;width: 70px;margin-left: 10px;">菜单状态</span>
        <el-select v-model="params.status" clearable placeholder="请选这菜单状态" style="width: 280px;">
          <el-option :key="0" label="启用" :value="0" />
          <el-option :key="1" label="禁用" :value="1" />
        </el-select> -->
        <el-button type="primary" :icon="Search" style="margin-left: 10px;" @click="handleSearch">搜索</el-button>
        <el-button @click="handleRefresh" :icon="Refresh">重置</el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-table :data="memebers.list" style="width: 100%" row-key="id">
          <el-table-column prop="username" label="用户名" />
          <el-table-column prop="sourceType" label="来源" width="200" align="center" />
          <el-table-column prop="phone" label="手机号" align="center" />
          <el-table-column prop="createTime" label="创建时间" align="center"/>
          <el-table-column label="状态" align="center">
            <template v-slot="scoped">
                <el-tag v-if="scoped.row.status === 0" type="primary">启用</el-tag>
                <el-tag v-if="scoped.row.status === 1" type="danger">禁用</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="235" fixed="right" align="center">
            <template v-slot="scoped">
              <el-button v-if="scoped.row.type !== 2" type="primary" text size="small" :icon="Refresh"
                @click="refreshPassword(scoped.row.id)">重置密码</el-button>
              <el-button type="primary" text size="small" :icon="EditPen"
                @click="handleUpdateStatus(scoped.row.id, scoped.row.status===0? 1:0)">
                {{scoped.row.status===0? '禁用账号':'启用账号'}}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div class="pageination">
            <el-pagination
                v-model:current-page="memebers.page"
                v-model:page-size="memebers.pageSize"
                :page-sizes="[10, 20, 30, 40]"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="memebers.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<style scoped lang='scss'>

</style>